<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单隐藏与显示</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("h2").click(function(){
                // 取出当前所点击选项对应的列表
                // 通过jquery函数获取的对象就是jquery对象
                let u = $(this).next();
                // 判断当前列表是隐藏的还是显示的
                // 如果是隐藏的
                if($(u).css("display") == "none"){
                    // 此时其他列表可能存在显示的
                    // 因此,先将所有列表全部隐藏
                    $("ul").hide();
                    // 将当前列表显示出来
                    u.show();
                } else{
                    // 如果当前列表是显示的,则只需要将当前列表隐藏即可
                    u.hide();
                }
            });
        })
    </script>
</head>
<body>
<h2>水果</h2>
<ul style="display: none;">
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
    <li>西瓜</li>
</ul>
<h2>电子产品</h2>
<ul style="display: block;">
    <li>手机</li>
    <li>手表</li>
    <li>平板</li>
</ul>
<h2>家用电器</h2>
<ul style="display: none">
    <li>电视</li>
    <li>冰箱</li>
    <li>空调</li>
</ul>
</body>
</html>